<template>
	<div>

    <el-row :gutter="15">
      <el-form ref="elForm" size="medium" label-width="100px">
        <el-col :span="18">
          <el-form-item label="搜素:">
            <el-input v-model="Search" placeholder="请输入需要查找的学号" clearable prefix-icon='el-icon-search'
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="搜索">
            <el-button type="primary" @click="subF(Search)" icon="el-icon-search" size="medium"> 查找 </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

  <el-table
    :data="tableDataR"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="学号"
      width="auto">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="auto">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      width="auto">
    </el-table-column>
    <el-table-column
      prop="department"
      label="系别"
      width="auto">
    </el-table-column>
    <el-table-column
        prop="diagnosis"
        label="诊断"
        width="auto">
    </el-table-column>
    <el-table-column
      prop="Date"
      label="日期"
      width="auto">
    </el-table-column>
    <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="win(scope.row), dialogVisible = true" type="text" size="small">修改</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
    </el-table-column>
  </el-table>

    <el-dialog title="修改" :visible.sync="dialogVisible" width="30%">

      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="12">
            <el-form-item label="学号" prop="id">
              <el-input v-model="formData.id" placeholder="请输入学号" readonly :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.name" placeholder="请输入姓名" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-input v-model="formData.sex" placeholder="请输入性别" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="系别" prop="department">
              <el-input v-model="formData.department" placeholder="请输入系别" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="诊断" prop="diagnosis">
              <el-input v-model="formData.diagnosis" placeholder="请输入诊断" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期" prop="date">
              <el-date-picker v-model="formData.date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请输入日期" clearable></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subWin(formData) ,dialogVisible = false">确 定</el-button>
      </span>

    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";

  export default {
	  name: "MedicalRecordsSearch",
    methods: {

      win(row){
        const that = this;
        that.formData = row
      },

      subWin(row){
        this.$confirm('此操作将更新, 是否继续?', '警告',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(()=>{
          axios.post('http://localhost:8080/medicalrecords/Update',qs.stringify(row))
          this.$confirm('成功','提示',{
            dangerouslyUseHTMLString: true, //
            // confirmButtonText: '确定',
            // cancelButtonText: '取消',
            showConfirmButton: false, //
            showCancelButton: false, //
            roundButton: true, // 必填
            type: 'success', // 必填
            customClass: 'picc-message-box', // 必填
            center: true,
            showClose: false
          })
          location.reload();
        }).catch(()=>{
          this.$confirm('已取消','提示',{
            dangerouslyUseHTMLString: true, //
            // confirmButtonText: '确定',
            // cancelButtonText: '取消',
            showConfirmButton: false, //
            showCancelButton: false, //
            roundButton: true, // 必填
            type: 'success', // 必填
            customClass: 'picc-message-box', // 必填
            center: true,
            showClose: false
          })
        })
      },

      subF(Sea) {
        const _this = this
        axios.get('http://localhost:8080/medicalrecords/find', {
          params:{
            id:Sea
          }
        }).then(function (resp) {
          _this.tableDataR = resp.data.MedDRec
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },

      handleDelete(row) {
        this.$confirm('此操作将删除, 是否继续?', '警告',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(()=>{
          axios.post('http://localhost:8080/medicalrecords/Del',qs.stringify(row))
          this.$confirm('成功','提示',{
            dangerouslyUseHTMLString: true, //
            // confirmButtonText: '确定',
            // cancelButtonText: '取消',
            showConfirmButton: false, //
            showCancelButton: false, //
            roundButton: true, // 必填
            type: 'success', // 必填
            customClass: 'picc-message-box', // 必填
            center: true,
            showClose: false
          })
          location.reload();
        }).catch(()=>{
          this.$confirm('已取消','提示',{
            dangerouslyUseHTMLString: true, //
            // confirmButtonText: '确定',
            // cancelButtonText: '取消',
            showConfirmButton: false, //
            showCancelButton: false, //
            roundButton: true, // 必填
            type: 'success', // 必填
            customClass: 'picc-message-box', // 必填
            center: true,
            showClose: false
          })
        })
      }
    },
    created() {
      const _this = this
      axios.get('http://localhost:8080/medicalrecords/All/').then(function (resp) {
        _this.tableDataR = resp.data.MedRec
      })
    },
    data() {
      return {
        tableDataR: null,
        Search: null,
        dialogVisible:false,
        formData: {
          id: undefined,
          name: undefined,
          sex: undefined,
          diagnosis: undefined,
          department: undefined,
          date: undefined,
        },
        rules: {
          id: [{
            required: true,
            message: '请输入学号',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '请输入性别',
            trigger: 'blur'
          }],
          diagnosis: [{
            required: true,
            message: '请输入系别',
            trigger: 'blur'
          }],
          department: [{
            required: true,
            message: '请输入系别',
            trigger: 'blur'
          }],
          date: [{
            required: true,
            message: '请输入日期',
            trigger: 'change'
          }],
        },
      }
    },
  }
</script>

